<template>
  <div class="container">
    <h1>学员进度管理</h1>
    <div class="student-container">
      <div class="student-header">
        <div>学员ID</div>
        <div>姓名</div>
        <div>是否报名</div>
        <div>科目一</div>
        <div>科目二</div>
        <div>科目三</div>
        <div>科目四</div>
      </div>
      <div v-for="student in studentInfo" :key="student.id" class="student-row">
        <div>{{ student.id }}</div>
        <div>{{ student.username }}</div>
        <!-- 在表格中显示学员的报名状态 -->
        <div>{{ getSignUpStatus(student.reflag) }}</div>
        <!-- 在@click中调用getButtonLabel方法 -->
        <!-- 在@click中调用handleButtonClick方法 -->
        <div><button :class="getButtonClasses(student.km1, 90)" @click="handleButtonClick(student.id, 'km1', student.km1)">{{ getDisplayedLabel(student.km1) }}</button></div>
        <div><button :class="getButtonClasses(student.km2, 80)" @click="handleButtonClick(student.id, 'km2', student.km2)">{{ getDisplayedLabel(student.km2) }}</button></div>
        <div><button :class="getButtonClasses(student.km3, 90)" @click="handleButtonClick(student.id, 'km3', student.km3)">{{ getDisplayedLabel(student.km3) }}</button></div>
        <div><button :class="getButtonClasses(student.km4, 90)" @click="handleButtonClick(student.id, 'km4', student.km4)">{{ getDisplayedLabel(student.km4) }}</button></div>
      </div>
    </div>
  </div>
</template>

<script>
import StudentProgress from "./js/StudentProgress";
export default StudentProgress;
import './css/StudentInfo.css';
</script>

<style scoped>


</style>